<template>
    <div class="table">
        <el-table :data="userList" style="width: 100%;">
            <el-table-column v-for="item in tableList" :width="item.width ? item.width : 180" :key="item.props"
                :prop="item.props" :label="item.label" />
            <el-table-column fixed="right" label="操作" min-width="180">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.row)">
                        编辑
                    </el-button>
                    <el-button link type="danger" size="small" @click="delHandle(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination size="small" class="mt-4 pager" @current-change="changePage" background layout="prev, pager, next"
            :total="config.total" v-model:current-page="config.page" />
    </div>
</template>


<script setup>
import { ref, reactive } from 'vue'
import { onMounted } from 'vue'
import { tabelListApi, userListApi, delUserApi } from '@/service/userListApi.js';
const props=defineProps({
    config:Object,
    getUserList:Function
})


onMounted(() => {
    getTabelList(), getUserList(props.config)
})
const getTabelList = async () => {
    let res = await tabelListApi();
    tableList.value = res.data
}
const handleEdit = (row) => {
    formTitle.value = 'edit'
    dialogVisible.value = true;
    // row.sex === 1 ? (row.sex = '女') : (row.sex = '男');
    nextTick(() => {
        Object.assign(formData, row)
    })
}
const changePage = (page) => {
    config.page = page
    getUserList(config)
}
const delHandle = (row) => {
    ElMessageBox.confirm('确定删除吗？')
        .then(async () => {
            let res = await delUserApi(row.id)
            console.log('200');
            if (res.code === 200) {
                ElMessage({
                    showClose: true,
                    message: '删除成功',
                    type: 'success'
                })
                getUserList(config)
            }
        })
        .catch(() => {
        })
}


</script>


<style lang='scss' scoped>
.table {
    position: relative;
    height: 520px;

    .pager {
        position: absolute;
        right: 0;
        bottom: 0
    }
}
</style>